<template>
  <div class="dictionary" style="height:calc(100% - 100px)">
    <el-dialog title="提示" :visible.sync="dialogVisible" width="80%">
      <el-form :model="currentItem">
        <el-form-item prop="name" label="上级字典名称" :label-width="'100px'">
          <el-select v-model="currentItem.parent_id" filterable placeholder="请选择">
            <el-option :label="'顶级字典'" :value="0"></el-option>
            <el-option v-for="item in codeList" :key="item.id" :label="item.keys" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="name" label="字典项名称" :label-width="'100px'">
          <el-input size="medium" v-model="currentItem.keys" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">提交</el-button>
      </span>
    </el-dialog>

    <div class="d-start" style="padding:10px 5px">
      <el-button size="medium" type="primary" @click="add()">新增</el-button>
    </div>

    <el-tree
      :data="codeList"
      :props="defaultProps"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      v-loading="isLoading"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <div>
          <el-tag size="mini">序号({{data.id}})</el-tag>
          {{ node.label }}
        </div>
        <span>
          <el-button size="mini" type="primary" plain @click="edit(data)">编辑</el-button>
          <el-button size="mini" type="danger" plain @click="del(data.id)">删除</el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "dictionary",
  data() {
    return {
      currentItem: {},
      dialogVisible: false,
      selectData: [],
      search: "",
      codeList: [],
      defaultProps: {
        children: "children",
        label: "keys"
      },
      isLoading: false
    };
  },
  created() {
    this.getCodeData();
  },
  methods: {
    handleSelectionChange(value) {
      this.selectData = value;
    },
    getCodeData() {
      this.isLoading = true;
      this.$get("/api/index/codes").then(res => {
        if (res.code == 200) this.codeList = res.data.list;
        this.isLoading = false;
      });
    },
    save() {
      if (this.currentItem.parent_id != 0) {
        this.currentItem.values = this.currentItem.keys;
      }
      this.$post("/api/index/codes_actions", this.currentItem).then(res => {
        if (res.code == 200) {
          this.dialogVisible = false;
          this.getCodeData();
        }
        this.$message({
          message: res.msg,
          type: res.state
        });
      });
    },
    add() {
      this.currentItem = {};
      this.dialogVisible = true;
    },
    edit(item) {
      this.currentItem = item;
      this.dialogVisible = true;
    },
    del(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$post("/api/index/codes_deletes", { id }).then(res => {
          if (res.code == 200) {
            this.getCodeData();
          }
          this.$message({
            message: res.msg,
            type: res.state
          });
        });
      });
    }
  }
};
</script>
<style lang="less">
.m-table {
  width: 100%;
  .cell {
    height: 50px;
    line-height: 50px;
    color: #909399;
    font-family: "Microsoft YaHei", -apple-system, BlinkMacSystemFont,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI",
      "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    outline: none;
    font-size: 14px;
    border-top: 1px solid rgba(232, 237, 238, 1);
    text-align: left;
  }
  th:first-child .cell {
    padding-left: 37px;
  }
  th:last-child .cell {
    text-align: right;
    margin-right: 10px;
  }
}
.el-tree {
  border-top: 1px solid rgba(232, 237, 238, 1);
}
.el-tree-node__content {
  height: 50px;
  border-bottom: 1px solid rgba(232, 237, 238, 1);
}
.el-tree-node__content {
  &:hover {
    // background: #89c2f7;
  }
}
.el-tree-node:focus > .el-tree-node__content {
  // background-color: #5daaf0;
}
.el-tree-node__content > .el-tree-node__expand-icon {
  border: 1px #ddd solid;
  border-radius: 50%;
  margin-left: 5px;
  margin-right: 10px;
  padding: 4px;
}
.el-tree-node__expand-icon.is-leaf {
  border: 1px #fff solid;
}
</style>
<style  lang="less">
.dictionary {
  background: white;
  border-radius: 5px;
  .el-tabs__content {
    height: 100%;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>